<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./css/main.css">
  <link rel="icon" href="./css/img/icon.png" type="image/x-icon" />
  <script src="./lib/RongRTC.3.1.2.js"></script>
  <script src="//cdn.ronghub.com/RongIMLib-2.5.3.js"></script>
  <script src="./lib/frameImage.js"></script>
  <script src="./lib/screenshare.js"></script>
  <script src="./lib/media.js"></script>
  <script src="./config.js"></script>
  <title>SealRTC</title>
</head>

<body lang="zh">
  <video id="test"></video>
  <!-- Login -->
  <div id="RongLogin" class="rong-wrap rong-login">
    <div class="rong-login-content">
      <img class="rong-login-logo" src="./css/img/logo.png">
      <h3 class="rong-login-title">SealRTC</h3>
      <div class="rong-login-roomjoin">
        <input id="roomId" class="rong-login-input" type="text" autocomplete="off" lang-placeholder="roomId">
        <input id="userName" maxlength="8" class="rong-login-input" type="text" autocomplete="off"
          lang-placeholder="userName">
        <input id="roomTelNum" class="rong-login-input" type="text" autocomplete="off" lang-placeholder="phoneNumber">
        <div class="rong-opt-stream">
          <div class="rong-opt-checkbox">
            <input type="radio" id="isCloseVideo" name="userOption" value="closeVideo">
            <span lang-textContent="closeVideo"></span>
          </div>
          <div class="rong-opt-checkbox">
            <input type="radio" id="isBystander" name="userOption" value="bystander">
            <span lang-textContent="bystanders"></span>
          </div>
        </div>
        <input id="start" class="rong-btn-start" type="button" lang-value="startRTC">
        <div class="rong-btn-loading">
          <img src="./css/img/loading.gif"> <span lang-textContent="btnLoading"></span>
        </div>
      </div>
      <div class="rong-login-telverify">
        <p class="rong-login-sms-tip" lang-textContent="phoneTips"></p>
        <input id="telNumber" class="rong-login-telNum rong-login-verify-input" type="text" autocomplete="off"
          lang-placeholder="phoneNumber">
        <div class="rong-login-codeline">
          <input id="verifyCode" class="rong-login-verifyCode rong-login-verify-input" type="number" autocomplete="off"
            lang-placeholder="verifyCode">
          <input id="verifyCodeBtn" class="rong-login-verifyBtn" type="button" lang-value="sendVerifyCode">
        </div>
        <input id="verifyLogin" class="rong-btn-verifyLogin" type="button" lang-value="verifyLogin">
      </div>
      <div class="rong-login-systemTips">
        <p lang-textContent="systemTips"></p>
      </div>
    </div>
    <div class="rong-opt-resolution">
      <div class="rong-resolution-wrap">
        <div class="rong-resolution-content">
          <i class="rong-resolution-arrow"></i>
          <h5 class="rong-resolution-title" lang-textContent="setting"></h5>
          <ul>
            <li lang-textContent="resolution"></li>
            <li>
              <input id="Rl-320-240" value="320*240" type="radio" name="resolution">
              <label for="Rl-320-240"></label>
              <span>320 * 240</span>
            </li>
            <li>
              <input id="Rl-640-480" value="640*480" type="radio" name="resolution" checked>
              <label for="Rl-640-480"></label>
              <span>640 * 480</span>
            </li>
            <li>
              <input id="Rl-1280-720" value="1280*720" type="radio" name="resolution">
              <label for="Rl-1280-720"></label>
              <span>1280 * 720</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="rong-copyright">
      <p lang-textContent="copyright"></p>
      <p lang-textContent="copyrightRecord"></p>
    </div>
  </div>

  <!-- RTC  -->
  <script id="RongRTC" type="text/x-template">
    <div id="RongRTC" class="rong-wrap rong-rtc">
      <div class="rong-rtc-opt">
        <span class="rong-rtc-title rong-user-title" id="rongUserName"></span>
        <span class="rong-rtc-title rong-user-timer"></span>
        <span class="rong-rtc-title rong-room-title"></span>
        <button class="rong-rtc-btn rong-opt-hangup" lang-title="hangup"></button>
        <a class="rong-rtc-btn rong-opt-share rong-share-openicon" lang-title="screenshare"></a>
        <a class="rong-rtc-btn rong-opt-share-close rong-share-closeicon" ></a>
        <a class="rong-rtc-btn rong-opt-userlist rong-opt-usericon" lang-title="userlist"></a>
        <a class="rong-rtc-btn rong-opt-custom-video rong-opt-videoicon-open" lang-title="customvideo"></a>
        <a class="rong-rtc-btn rong-opt-custom-video-close rong-opt-videoicon-close" lang-title="closecustomvideo"></a>
        <a class="rong-rtc-btn rong-opt-wb" lang-title="whiteboard"></a>
        <a class="rong-rtc-btn rong-opt-custom-audio rong-opt-audioicon-open" lang-title="customaudio"></a>
        <a class="rong-rtc-btn rong-opt-custom-audio-close rong-opt-audioicon-close" lang-title="closecustomaudio"></a>
      </div>
      <div id="RongWB" class="rong-wb-box">
        <a class="rong-wb-close"></a>
        <iframe id="rongWhiteboard" class="rong-whiteboard" src="" frameborder="0"></iframe>
      </div>
      <div class="rong-stream-wrap"></div> 
      <div class="rong-user-list">
        <div class="rong-user-list-title">
          <div id="userListNum" class="online-user"></div>
          <div id="user-list-close" class="user-list-close" ><span lang-textContent="userListClose"></span></div>
        </div>
        <div id="rongRoomUsers" class="user-list-main"> </div>
      </div> 
      <div class="rong-user-customvideo">
        <div class="customvideo-triangle"></div>
        <ul class="customvideo-list">
          <li id="rong-customVideo1" lang-textContent="customVideo1"></li>
          <li id="rong-customVideo2" lang-textContent="customVideo2"></li>
        </ul>
      </div>
      <div class="rong-user-customaudio">
        <div class="customaudio-triangle"></div>
        <ul class="customaudio-list">
          <li id="rong-customAudio1" lang-textContent="customAudio1"></li>
        </ul>
      </div>
    </div>
    
  </script>

  <script id="RongStreamList" type="text/x-template">
    <div class="rong-stream-list">
      <div class="rong-case-pre"></div>
      <div class="rong-case-next"></div>
    </div>
  </script>

  <script id="RongStreamBox" type="text/x-template">
    <div class="rong-stream-box">
      <video class="rong-video" autoplay ></video>
      <div class="rong-stream-top">
        <span id="soundGif"><img src="./css/img/sound.gif" class="rong-sound" ></span>
        <p class="rong-user-name">{name}</p>
      </div>
      <div class="rong-share-cover rong-rtc-cover">
        <div class="rong-cover-content">
          <img src="./css/img/share-cover.png">
          <p class="rong-sharecover-title" lang-textContent="screenshareBusy"></p>
        </div>
      </div>
      <div class="rong-audio-cover rong-rtc-cover">
        <div class="rong-cover-content">
          <img src="./css/img/audio-cover.png">
          <p class="rong-audiocover-title" lang-textContent="videoClosed"></p>
        </div>
      </div>
      <div class="rong-stream-opt">
        <a class="rong-opt-btn rong-opt-video"></a>
        <a class="rong-opt-btn rong-opt-video-disabled"></a>
        <a class="rong-opt-btn rong-opt-audio"></a>
        <a class="rong-opt-btn rong-opt-audio-disabled"></a>
      </div>
      <div class="rong-custom-video"></div>
    </div>
  </script>

  <script id="RongAlert" type="text/x-template">
    <div class="rong-alert-box">
      <div class="rong-alert">
        <p class="rong-alert-title" lang-textContent="alertTitle"></p>
        <p class="rong-alert-content">{content}</p>
        <div class="rong-alert-btn-box">
          <input class="rong-alert-cancel" style="display: {cancelDisplay}" type="button" lang-value="cancel">
          <input class="rong-alert-confirm" type="button" lang-value="conform">
        </div>
      </div>
    </div>
  </script>
  <script id="RongTips" type="text/x-template">
    <div class="rong-seal-tips" style="display: block; margin-top: -11px;">
    <span class="rong-seal-tips-text">{content}</span>
  </div>
  </script>

  <script src="./js/locale/en.js"></script>
  <script src="./js/locale/zh.js"></script>
  <script src="./js/utils.js"></script>
  <script src="./js/common.js"></script>
  <script src="./js/im.js"></script>
  <script src="./js/login.js"></script>
  <script src="./js/main.js"></script>
  <script src="./js/whiteboard.js"></script>
</body>

</html>